<template>
  <div
    :style="{
      '--scroll-width': '0px',
    }"
  >
    <div class="home-header">
      <ly-header />
    </div>
    <div class="wrap-item">
      <div class="wrap-btn-group">
        <span class="wrap-btn wrap-go-back" @click="go">返回</span>
      </div>
      <div class="wrap-other-roll">
        <item-detail :data="approve" />
        <div
          style="text-align: right; margin-top: 20px"
          v-if="$route.query.linkId"
        >
          <span class="wrap-btn wrap-success" @click="approval(1)">通过</span>
          <span class="wrap-btn wrap-danger" @click="approval(2)">驳回</span>
        </div>
      </div>
      <!-- 审批信息 -->
      <el-dialog title="审批信息" :visible.sync="visible" width="888px">
        <el-form label-width="80px" :model="form" size="medium">
          <el-form-item label="审批意见">
            <el-input
              type="textarea"
              v-model="form.auditNote"
              maxlength="100"
              placeholder="请填写审批意见"
              rows="2"
              resize="none"
            ></el-input>
          </el-form-item>
          <el-form-item label="附件">
            <web-upload @upload="upload" type="file" />
            <el-table :data="form.auditFile" v-if="form.auditFile.length > 0">
              <el-table-column prop="name" label="名称">
                <template slot-scope="scope">
                  <el-tooltip
                    popper-class="ellipsis-tip"
                    :content="scope.row.name"
                    placement="top-start"
                  >
                    <span class="ellipsis">{{ scope.row.name }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="size" label="大小"></el-table-column>
              <el-table-column
                prop="content"
                label="操作"
                width="100px"
                align="center"
              >
                <template slot-scope="scope">
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="downloadFile(scope.row)"
                    >下载</el-link
                  >
                  <el-link
                    type="danger"
                    :underline="false"
                    style="margin-left: 10px"
                    @click="remove(scope.row)"
                    >删除</el-link
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item style="text-align: end">
            <span class="wrap-btn wrap-success" @click="save">确定</span>
            <span class="wrap-btn wrap-default" @click="visible = false"
              >取消</span
            >
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import lyHeader from './../../layout/header/index.vue'
import Base64 from 'base-64'
import itemDetail from './../messageCenter/components/detail.vue'
export default {
  components: { lyHeader, itemDetail },
  data() {
    return {
      userInfo: {
        userName: this.$crypto.decrypt(
          Base64.decode(JSON.parse(sessionStorage.userInfo).userName)
        ),
        workPost: JSON.parse(sessionStorage.userInfo).workPost,
        lastLoginTime: JSON.parse(sessionStorage.userInfo).lastLoginTime,
      },
      visible: false,
      form: { auditFile: [] },
      approve: [],
    }
  },
  created() {
    if (this.$route.query.id && this.$route.query.runTaskId) {
      this.itemList()
    }
  },
  methods: {
    go() {
      //返回
      const url = this.$route.query.type ? '/home/index' : '/home/backlog'
      this.$router.push(url)
    },
    itemList() {
      // 获取详情
      this.$axios
        .get(
          `/admin/process/findById?id=${this.$route.query.id}&runTaskId=${this.$route.query.runTaskId}`
        )
        .then((data) => {
          this.approve = []
          if (data.code == 200) {
            this.approve = JSON.parse(data.data.approveFormItem) || []
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    approval(type) {
      //审批
      this.form = {
        auditFile: [],
        result: type,
        linkId: this.$route.query.linkId,
        runTaskId: this.$route.query.runTaskId,
        id: this.$route.query.id,
      }
      this.visible = true
    },
    save() {
      //保存
      if (!this.form.auditNote && this.form.result != 1) {
        this.$message.error('请填写审批意见')
        return false
      }
      this.$axios.post('/admin/process/audit', this.form).then((data) => {
        if (data.code == 200) {
          this.visible = false
          this.$message.success('操作成功！')
          const url = this.$route.query.type ? '/home/index' : '/home/backlog'
          this.$router.push(url)
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    upload(data) {
      //上传
      this.form.auditFile.push(data)
    },
    downloadFile(item) {
      //下载附件
      const a = document.createElement('a')
      a.download = item.name
      a.href = item.fileDomain + item.url
      a.click()
    },
    remove(item) {
      //删除
      var index = this.form.auditFile.indexOf(item)
      if (index !== -1) {
        this.form.auditFile.splice(index, 1)
      }
    },
  },
}
</script>
<style scoped>
.home-header {
  padding-bottom: 20px;
}
</style>
